<template>
  <div class="app-container">
      <!-- 列表 -->
<!--      <el-col :lg="24" :xs="24">-->
        <div class="toolbar">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="关键字" prop="author">
              <el-input
                  v-model="queryParams.author"
                  placeholder="输入评论作者用户名"
                  clearable
                  style="width: 300px;height: 30px"
                  @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="课程名称" prop="courseName">
              <el-input
                v-model="queryParams.courseName"
                placeholder="输入课程名称"
                clearable
                style="width: 300px;height: 30px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size='large' @click="handleQuery" :icon='Search'
              >搜索</el-button
              >
              <el-button @click="resetQuery" size='large' :icon='Refresh'>
                重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
          <el-table
              v-loading="loading"
              :data="pageData"
              :strip='true'
              :border='true'
              @selection-change="handleSelectionChange"
          >
            <el-table-column
                key="id"
                label="课程评论id"
                align="center"
                prop="id"
            />
            <el-table-column
                key="courseName"
                label="课程名称"
                align="center"
                prop="courseName"
            />
            <el-table-column
                label="评论作者"
                align="center"
                prop="author"
                width="200"
            />
            <el-table-column
                label="创建时间"
                align="center"
                prop="createTime"
                width="180"
            />
            <el-table-column
              label="更新时间"
              align="center"
              prop="updateTime"
              width="180"
            />
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button
                    type="primary"
                    size="large"
                    @click="viewContent(scope.row.id)"
                    :icon="View"
                >查看评论内容</el-button>
                <el-button
                    type="warning"
                    size="large"
                    @click="handleDelete(scope.row.id)"
                    :icon="Delete"
                >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-footer class='footer'>
            <el-pagination
                large
                background
                v-model:current-page="pagination.pageNum"
                v-model:page-size="pagination.pageSize"
                :page-count='pagination.pageCount'
                layout='total, prev, pager, next'
                :total='pagination.total'
                class='mt-4'
                style='float: right'
                @change='getPage'
            />
          </el-footer>
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->

    <!-- 弹窗 -->
    <el-dialog
        v-model="dialog.visible"
        :title="dialog.title"
        :width="dialog.width"
        append-to-body
        @close="closeDialog"
    >
      <!-- 用户新增/编辑表单 -->
        <div>
          <el-row :gutter="10" style="margin: 10px;">
            <el-col :span="2">课程：</el-col>
            <el-col :span="22">{{courseCommentData.courseName}}</el-col>
          </el-row>
          <el-row :gutter="10" style="margin: 10px;">
            <el-col :span="2">作者：</el-col>
            <el-col :span="22">{{courseCommentData.author}}</el-col>
          </el-row>
          <el-row style="margin: 10px;">
            <el-col :span="24">
              <el-input type="textarea" readonly v-model="courseCommentData.content" :autosize="{minRows: 10}">
              </el-input>
            </el-col>
          </el-row>
        </div>
      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">确  定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang='ts'>
import {deleteCoach,getCoachForm} from '@/api/coach'
import { Plus, Delete, Edit, Search, Share, Refresh, View } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage, ElForm } from 'element-plus'
import { ref,onMounted,reactive } from "vue";
import { courseComment, courseCommentsPage } from '@/api/course/comment'

const queryFormRef = ref(ElForm); // 查询表单
const userFormRef = ref(ElForm); // 用户表单

const loading = ref(false); //  加载状态
const removeIds = ref([]); // 删除用户ID集合 用于批量删除
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  courseName: null,
  courseId: null,
  author: null,
});
const total = ref(0); // 数据总数
const pageData = ref(); // 用户分页数据
const pagination = ref({
  pageNum: 1,pageSize: 10,total: 0,pageCount: 1
});
const courseCommentData = ref({})
// 弹窗对象
const dialog = reactive({
  visible: false,
  type: "user-form",
  width: 800,
  title: "评论内容",
});

/** 查询 */
function handleQuery() {
  getPage(queryParams.pageNum,queryParams.pageSize);
}

function getPage(currentPage:number,pageSize :number){
  pagination.value.pageNum = queryParams.pageNum = currentPage || 1;
  pagination.value.pageSize = queryParams.pageSize = pageSize || 10
  loading.value = true;
  courseCommentsPage(queryParams)
      .then(({ data }) => {
        pageData.value = data.records;
        total.value = data.total;
        pagination.value.pageNum = data.current
        pagination.value.pageSize = data.size
        pagination.value.total = data.total
        pagination.value.pageCount = data.pages
        queryParams.pageNum = data.current;
        queryParams.pageSize = data.size;
      })
      .finally(() => {
        loading.value = false;
      });
}

/** 重置查询 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  handleQuery();
}

/** 行选中 */
function handleSelectionChange(selection: any) {
  removeIds.value = selection.map((item: any) => item.id);
}

/** 重置密码 */
function viewContent(id) {
  courseComment(id).then((resp) => {
    dialog.visible = true;
    courseCommentData.value = resp.data
  })
}

/**
 * 关闭弹窗
 *
 * @param type 弹窗类型  用户表单：user-form
 */
function closeDialog() {
  dialog.visible = false;
}

/** 删除 */
function handleDelete(id?: number) {
  const userIds = [id || removeIds.value].join(",");
  if (!userIds) {
    ElMessage.warning("请勾选删除项");
    return;
  }

  ElMessageBox.confirm("确认删除?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(function () {
    let deleteIds = [];
    if(removeIds.value && removeIds.value.length > 1){
      deleteIds = removeIds.value;
    }else{
      deleteIds.push(id);
    }
    deleteCoach(deleteIds).then(() => {
      ElMessage.success("删除成功");
      resetQuery();
    });
  });
}

onMounted(() => {
  handleQuery();
});
</script>
.toolbar {
padding: 10px 0;
}
<style scoped>
.footer {
  margin-top: 20px;
}
</style>
